<template>
  <div class="menu" @touchmove.prevent.stop v-show="show">
    <div class="line-wrap" v-for="(item, key) in list" :key="key">
      <div class="line" @click="clickHandler(item)">
        <span>{{item.title}}</span>
        <img v-if="item.arrow" class="icon" :src="item.childrenShow ? up : down" alt="">
      </div>
      <div v-if="item.children">
        <div v-show="item.childrenShow">
          <div class="sub-menu" v-for="(subItem, subindex) in item.children" :key="subindex">{{subItem.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, defineProps, defineEmits} from 'vue'
import { useRouter } from 'vue-router'
import down from '~/assets/down.png'
import up from '~/assets/up.png'
defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:show'])

let router = useRouter()
interface IListItem {
  title: string
  close?:boolean
  arrow?:boolean
  fun?:any
  childrenShow?:boolean,
  children?: [],
  [propsName: string]:any
}
const list = ref([
  {
    title: '文档',
    arrow: true,
    childrenShow: false,
    children: [
      {
        title: '前端监控系统'
      },
      {
        title: '埋点系统'
      },
      {
        title: '常见问题'
      }
    ]
  },
  {
    title: '更新日志',
    close: true,
    fun: () => {

      router.push('/log')

    }
  },
  {
    title: '价格'
  },
  {
    title: '关于',
    close: true,
    fun: () => {

      router.push('/abort')

    }
  }
])
const close = () => {

  emits('update:show', false)

}
const clickHandler = (item:IListItem) => {

  if (item.fun) {

    item.fun()

  }
  if (item.close) {

    close()

  }

  if (item.children) {

    item.childrenShow = !item.childrenShow

  }


}

</script>

<style lang="stylus" scoped>
@import '~/styles/common.styl';
.menu
  position fixed
  left 0
  top 44px
  right 0
  z-index 99
  height calc(100vh - 44px)
  padding 0 16px 0 20px
  background #fff
  .line-wrap
    box-shadow: inset 0px -1px 0px 0px rgba(235, 235, 235, 0.5);
    .line
      {flexBox}
      justify-content space-between
      width: 339px;
      height: 50px;
      font-size: 14px;
      font-weight: 500;
      color: #393F56;
      line-height: 20px;
    .icon
      width 24px
    .sub-menu
      padding 10px 24px
      font-size: 14px;
      font-weight: 400;
      color: #393F56;
      line-height: 20px;

</style>